/**
 * Created by yujianfu on 2016/11/10.
 */
import React, { Component, PropTypes } from 'react'
import { Card, Table, Icon, message, Popover, Input, Button } from 'antd'
import Styles from './Index.less'
import { fetchPost } from './../../../../../utils/request'

class ClContact extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      userId: props.userId,
      tradeNo: props.tradeNo,
      data: [],
      message: '',
      timer: null,
      id: props.id,
    }
  }

  componentWillReceiveProps (props) {
    if (this.state.tradeNo !== props.tradeNo) {
      this.setState({
        userId: props.userId,
        tradeNo: props.tradeNo,
        id: props.id
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount () {
    this.getData()
  }

  componentWillUnmount () {
    clearTimeout(this.state.timer)
  }

  getData () {
    if (this.state.tradeNo != null) {
      fetchPost(`/collection/v2/user/emergency/contacts/list`, { 'tradeNo': this.state.tradeNo }).then(json => {
        if (json.data != null && json.code === 0) {
          this.setState({
            data: json.data.list
          })
        } else {
          this.setState({
            data: [],
            message: json.msg
          })
        }
      })
    } else {
      this.setState({
        data: []
      })
    }
  }

  message () {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  renderContact () {
    if (this.state.data == null) {
      return <div></div>
    }
    const data = this.state.data
    // console.log(data, '======')
    // let content = []
    // let i = 0
    // data.map(d => {
    //   if (i === 0) {
    //     content.push(
    //       <div key={d.relation}>
    //         <div key={d.relation} className={Styles.oneLineContent}>
    //           <span style={{ width: '20%' }}>Relatives</span>
    //           :
    //           <span style={{ width: '80%', paddingLeft: 5 }}>{d.relation}</span>
    //         </div>
    //         <div key={d.name} className={Styles.oneLineContent}>
    //           <span style={{ width: '20%' }}>Name</span>
    //           :
    //           <span style={{ width: '80%', paddingLeft: 5 }}>{d.name}</span>
    //         </div>
    //         <div key={d.mobile} className={Styles.oneLineContent}>
    //           <span style={{ width: '20%' }}>Mobile</span>
    //           :
    //           <span style={{ width: '80%', paddingLeft: 5 }}>{d.mobile}</span>
    //         </div>
    //       </div>
    //     )
    //   } else if (i == 1) {
    //     content.push(
    //       <div key={d.relation}>
    //         <div key={d.relation} className={Styles.oneLineContent}>
    //           <span style={{ width: '20%' }}>Friend or Colleague</span>
    //           :
    //           <span style={{ width: '80%', paddingLeft: 5 }}>{d.relation}</span>
    //         </div>
    //         <div key={d.name} className={Styles.oneLineContent}>
    //           <span style={{ width: '20%' }}>Name</span>
    //           :
    //           <span style={{ width: '80%', paddingLeft: 5 }}>{d.name}</span>
    //         </div>
    //         <div key={d.mobile} className={Styles.oneLineContent}>
    //           <span style={{ width: '20%' }}>Mobile</span>
    //           :
    //           <span style={{ width: '80%', paddingLeft: 5 }}>{d.mobile}</span>
    //         </div>
    //       </div>
    //     )
    //   }
    //   i++
    // })
    let content = []
    if (data != null && data.length > 0) {
      data.map(function (item) {
        let value = item.value
        if (value == null) {
          value = '--'
        }
        content.push(
          <div key={item.name} className={Styles.content}>
            <span style={{ width: '20%' }}>{item.name}</span>
            :
            <span style={{ width: '80%', paddingLeft: 5 }}>{value}</span>
          </div>
        )
      })
    }
    return content
  }

  render () {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: 'Relationship',
        dataIndex: 'relation',
        key: 'relation'
      },
      {
        title: 'Mobile',
        dataIndex: 'mobile',
        render: (text, record) => (
          <span>{record.mobile}</span>
        )
      }
    ]

    return (
      <div className={Styles.detailModule}>
        <Card extra={this.message()} bodyStyle={{ padding: 0 }} noHovering={true}>
          {this.renderContact()}
        </Card>
      </div>
    )
  }
}

export default ClContact
